import Base from "../base.js";
import Schedules from "../../api/schedules.js";
import Seats from "./seats.js";
import projectionHallApi from "../../api/projectionHall.js";
export default class extends Base {
  data = {
    cinemasId: 1,
    projectionId: 1,
  }
  //   获取数据渲染页面
  async render() {
    this.$el.html(
      `
      <div style="display: flex;margin-top:30px;">
        <table style="margin:0 30px;height: 300px ">
          <tbody class="layui-form layui-input-inline" id="seats">
            <tr>
              <td style="text-align: right;">影片：</td>
              <td>
                <select name="quiz2" lay-verify="" id="movies" style="width: 150px;margin: 10px;"></select>
              </td>
            </tr>
            <tr>
              <td style="text-align: right;">影院：</td>
              <td>
                <select name="city" lay-verify="" id="cinema" style="width: 150px;margin: 10px;" lay-filter="cinemas"></select>
              </td>
            </tr>
            <tr>
              <td style="text-align: right;">放映厅：</td>
              <td>
                <select name="city" lay-verify="" id="projection" style="width: 150px;margin: 10px;"></select>
              </td>
            </tr>
            <tr>
              <td style="text-align: right;width: 80px;">时间日期：</td>
              <td> 
                  <input type="text" name="title" lay-verify="title" id="test10" autocomplete="off" placeholder="请选择时间" class="layui-input" >
              </td>
            </tr>
            <tr>
              <td style="text-align: right;">价格：</td>
              <td><input type="text" name="title" id="price" lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input" ></td>
            </tr>
            <tr>
              <td style="text-align: right;"> </td>
              <td><button id="save" type="button" class="layui-btn" style="width: 80px;height: 40px;margin: 10px;">保存</button></td>
            </tr>
          </tbody>
        </table>
        <table id="schedules" lay-filter="test"></table>
      </div>
      `
    );
    this.$movies = $("#movies");
    this.$cinema = $("#cinema");
    this.$projection = $("#projection");
    this.$test10 = $("#test10");
    this.$price = $("#price");
    this.$save = $("#save");
    this.movies();
    this.time();
    this.cinema();
    // this.projection();
    this.rerender();
    this.simuaite();
  }

  // layui排片渲染
  layuiget(data) {
    layui.use(['form', 'table'], function () {
      var table = layui.table;
      var form = layui.form;
      form.render('select');
      //第一个实例
      table.render({
        elem: '#schedules'
        , height: 472,
        // ,url: '/demo/table/user/' //数据接口
        data: data
        , page: true //开启分页
        , cols: [[ //表头
          { field: 'movieId', title: '影片', width: 150, sort: true }
          , { field: 'cinemasId', title: '影院', width: 150, sort: true }
          , { field: 'theaterId', title: '放映厅', width: 150, sort: true }
          , { field: 'showTime', title: '时间', width: 80, sort: true }
          , { field: 'price', title: '价格', width: 80, sort: true }
          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120 }
        ]]
      });
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        //console.log(obj)
        if (obj.event === 'del') {
          layer.confirm('真的删除？', function (index) {
            obj.del();
            layer.close(index);

          });
        } else if (obj.event === 'edit') {
          console.log("座位");
        }
      });
      form.render('select');
      //监听行工具事件
      table.on('tool(test)', async function (obj) {
        //console.log(obj)
        if (obj.event === 'del') {
          window.alert("删除");
        } else if (obj.event === 'edit') {
          new Seats({ el: ".info-content", obj });
        }
      });
    });
  }
  // 初始化排片数据
  async rerender() {
    const data = await Schedules.schedules();
    await data.map((item) => {
      item.movieId = item.movieId.cname;
      item.cinemasId = item.cinemasId.name;
      item.theaterId = item.theaterId.name;
    });
    this.layuiget(data);
  }
  // 电影
  async movies() {
    const data = await Schedules.movies();
    // 渲染影片数据
    let str = data.map((item) => {
      return `
      <option value="${item._id}">${item.cname}</option>
      `
    }).join("");
    // console.log(str);
    this.$movies.html(str);
  }
  // 影院
  async cinema() {
    const data = await Schedules.cinema();
    // 渲染影院数据
    let str = data.map((item) => {
      return `
      <option value="${item._id}">${item.name}</option>
      `
    }).join("");
    this.$cinema.html(str);
    const form = layui.form;
    form.render();
    form.on("select(cinemas)", async function (data) {
      const cinemasId = data.value;
      const projectionHall = await projectionHallApi.getTheater(cinemasId);
      projectionHall.map((item) => {
        return `
        <option value="${item._id}">${item.name}</option>
        `
      }).join("");
      $("#projection").html(`${
        projectionHall.map((item) => {
          return `
          <option value="${item._id}">${item.name}</option>
          `
        }).join("")
      }`)
      layui.form.render();
    })
  }
  // 放映厅
  // async projection() {
  //   const data = await Schedules.projection();
  //   // 过滤出需要的数据
  //   // console.log(data);
  //   // const proData = data.filter((item) => { return item.projectionId == proId });
  //   // 渲染放映厅数据
  //   let str = data.map((item) => {
  //     return `
  //     <option value="${item._id}">${item.name}</option>
  //     `
  //   }).join("");
  //   this.$projection.html(str);
  // }
  // 保存
  async save() {
    const movieId = $("#movies option:selected").val(); //影片
    const cinemasId = $("#cinema option:selected").val(); //影院
    const theaterId = $("#projection option:selected").val();//放映厅
    const showTime = this.$test10.val();//日期
    const price = this.$price.val(); //价格
    const data = await Schedules.Post({ movieId, cinemasId, theaterId, showTime, price });
    this.rerender();
    window.alert("保存成功");
  }
  // 事件
  handle() {
    this.$save.on("click", this.save.bind(this));
  }
  // 时间
  time() {
    //日期时间范围
    laydate.render({
      elem: '#test10'
      , type: 'datetime'
      , range: true,
      format: "MM月dd/HH点mm"
    });
  }
  // 排片用户模拟
  simuaite() {
    function getNum(minNum = 0, maxNum = 0) {
      minNum > maxNum ? [minNum, maxNum] = [maxNum, minNum] : "";
      return parseInt((maxNum - minNum + 1) * Math.random() + minNum);
    }
    let index = getNum(0, 4);
    let data = ["615196638e0c8f316c3b8ca8", "61519e7ec6c4fd4a548585f2", "61519ea0c6c4fd4a548585f3", "61519eabc6c4fd4a548585f4", "61519ebac6c4fd4a548585f5"];
    sessionStorage.setItem("userName", data[index]);
  }
}